<?php
defined('SYSPATH') OR die('No direct access allowed.');
/**
 * grid.php
 * @author ranuandra
 *
 * 4 Okt 2011 13:44:56
 *
 * 
 */
?>
Ext.ns('App', 'App.user');
/**
 * App.user.Grid
 * A typical EditorGridPanel extension.
 */
App.user.Grid = Ext.extend(Ext.grid.EditorGridPanel, {
    //renderTo: 'user-grid',
    iconCls: 'silk-grid',
    frame: true,
    //title: 'Users',
    height: 500,

    initComponent : function() {

        // typical viewConfig
        this.viewConfig = {
            forceFit: true
        };

        this.proxy = new Ext.data.HttpProxy({
            api: {
		        read : '<?php echo URL::base()?>user/view',
		        create : '<?php echo URL::base()?>user/create',
		        update: '<?php echo URL::base()?>user/update',
		        destroy: '<?php echo URL::base()?>user/delete'
            }
        });

        // Typical JsonReader.  Notice additional meta-data params for defining the core attributes of your json-response
        this.reader = new Ext.data.JsonReader({
            totalProperty: 'total',
            successProperty: 'success',
            //idProperty: 'id',
            root: 'user'
        }, [
			    {name: 'id'},
			    {name: 'username', allowBlank: false},
			    {name: 'email', allowBlank: false},
			    {name: 'password', allowBlank: true}

			]);

        // The new DataWriter component.
        this.writer = new Ext.data.JsonWriter({
            encode: true,
            writeAllFields: true
        });

        // Typical Store collecting the Proxy, Reader and Writer together.
        this.store = new Ext.data.Store({
            id: 'user',
            proxy: this.proxy,
            reader: this.reader,
            writer: this.writer,  // <-- plug a DataWriter into the store just as you would a Reader
            autoSave: false,  // <-- false would delay executing create, update, destroy requests until specifically told to do so with some [save] buton.
            listeners: {
                write : function(store, action, result, res, rs) {
                    //App.setAlert(res.success, res.message); // <-- show user-feedback for all write actions
        			//Ext.MessageBox.alert(res.success, res.message);
                },
                exception : function(proxy, type, action, options, res, arg) {
        			//Ext.MessageBox.alert('dasdasdasd');
                    if (type === 'remote') {
                        Ext.Msg.show({
                            title: 'REMOTE EXCEPTION',
                            msg: res.message,
                            icon: Ext.MessageBox.ERROR,
                            buttons: Ext.Msg.OK
                        });
                    }
                }
            }
        });


        this.textField =  new Ext.form.TextField();

        // Let's pretend we rendered our grid-columns with meta-data from our ORM framework.
        this.Columns =  [
		    {header: "ID", width: 40, sortable: true, dataIndex: 'id'},
		    {header: "Username", width: 100, sortable: true, dataIndex: 'username', editor: this.textField},
		    {header: "E-mail", width: 100, sortable: true, dataIndex: 'email', editor: this.textField},
		    {header: "Password", width: 100, sortable: true, dataIndex: 'password', editor: this.textField}
		];
        // relay the Store's CRUD events into this grid so these events can be conveniently listened-to in our application-code.
        //this.relayEvents(this.store, ['destroy', 'save', 'update']);
        this.store.load();
        Ext.apply(this, {
    		store: this.store,
    		columns: this.Columns,
    		border:false
    	});
        // build toolbars and buttons.
        this.tbar = this.buildTopToolbar();
        this.buttons = this.buildUI();
       // this.bbar = this.buildBottomToolbar();

        // super
        App.user.Grid.superclass.initComponent.call(this);
    },

    /**
     * buildTopToolbar
     */
    buildTopToolbar : function() {
        return [{
            text: 'Add',
            iconCls: 'silk-add',
            handler: this.onAdd,
            scope: this
        }, '-', {
            text: 'Delete',
            iconCls: 'silk-delete',
            handler: this.onDelete,
            scope: this
        }, '-'];
    },

    buildUI : function() {
        return [{
            text: 'Save',
            iconCls: 'icon-save',
            handler: this.onSave,
            scope: this
        }];
    },

    /**
     * onSave
     */
    onSave : function(btn, ev) {
        this.store.save();
    },

    /**
     * onAdd
     */
    onAdd : function(btn, ev) {
        var u = new this.store.recordType({
            first : '',
            last: '',
            email : ''
        });
        this.stopEditing();
        this.store.insert(0, u);
        this.startEditing(0, 1);
    },

    /**
     * onDelete
     */
    onDelete : function(btn, ev) {
        var index = this.getSelectionModel().getSelectedCell();
        if (!index) {
            return false;
        }
        var rec = this.store.getAt(index[0]);
        this.store.remove(rec);
    }
});